<template>
    <div class="field-item-box">
        <div class="field-item-head flex-row-start">
            <div class="field-item-head-flag" :style="{backgroundColor:flagColor}"></div>
            <div class="field-item-head-content">
                {{fieldName}}
            </div>
        </div>
        <div class="field-item-body flex-row-start">
            {{fieldValue}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "FieldItem",
        props:{
            field:{
                type:String,
                default:"属性"
            },
            value:{
                type:String | Number,
                default:"属性值"
            },
            color:{
                type:String,
                default:'#FF008080'
            }
        },
        data(){

            return{
                fieldName:this.$props.field,
                fieldValue:this.$props.value,
                flagColor:this.$props.color
            }
        },
        watch:{
            field(newV){
                this.fieldName=newV
            },
            value(newV){
                this.fieldValue=newV
            },
            color(newV){
                this.flagColor=newV
            }
        }
    }
</script>

<style scoped lang="less">
    .field-item-box{
        width: 100%;
        height: 100%;
        min-width: 100px;
        min-height: 50px;
        display: flex;
        flex-direction: column;

        .field-item-head{
          margin-bottom: 10px;

          .field-item-head-flag {
            width: 10px;
            height: 100%;
            min-height: 20px;
            margin-right: 5px;
          }

          .field-item-head-content {
            font-size: 18px;
            height: 100%;
          }
        }
        .field-item-body {
          min-height: 20px;
          margin-left: 40px;
          font-size: 15px;
          text-align: left;

        }
    }
</style>